<template>
	<view class="wh-full">
		
		<!-- 头部组件 -->
		<use-header :fixed="headerFixed" :placeholder="headerPlaceholder" type="gray" :search-tip="searchTip" :search-auto="searchAuto"></use-header>

		<!-- 分类 -->
		<view class="category dflex-s h-full padding-top-big">
			<!-- 左侧一级分类 -->
			<view class="h-full left padding-tb-16">
				<scroll-view scroll-y class="h-full">
					<view v-for="(item,index) in categorys" :key="item.id" class="item dflex-c"
						:class="{ active: categoryIndex === index }" @click="categorySelect(item,index)">{{ item.title }}</view>
				</scroll-view>
			</view>

			<!-- 右侧 1二级分类 2商品列表 -->
			<scroll-view class="h-full right" scroll-with-animation scroll-y :scroll-top="top"
				:style="{ height: scrollHeight, paddingLeft: 0 }" @scroll="onScroll">
				
				<!-- 右侧二级分类 -->
				<view :class="{ 'padding-tb-sm': !categoryEmpty, 'padding-lr': !categoryEmpty }">
					<use-empty v-if="categoryEmpty" height="70vh" :btn-tip="false" e-style="round" tip="无分类数据"></use-empty>
					
					<view v-if="!categoryEmpty" class="bg-main border-radius margin-bottom-sm">
						<view class="dflex item" style="width: 100%;">
							<image style="flex-shrink:0;"  mode="heightFix" :src="categorys[categoryIndex].catePic"></image>
							<view class="padding-bottom-sm padding-left-xs dflex dflex-flow-c use-hover">
								<text style="font-size: 15px;" class="active  clamp margin-top-sm">{{ categorys[categoryIndex].title }}</text>
								<text style="white-space: break-spaces;" class="clamp margin-top-xs">{{ categorys[categoryIndex].remark}}</text>
							</view>
						</view>
					</view>
					
					<view v-if="!categoryEmpty &&categorys[categoryIndex]&&categorys[categoryIndex].children&& categorys[categoryIndex].children.length > 0" class="bg-main border-radius margin-bottom-sm padding-top">
						<view class="dflex-s dflex-wrap-w">
							<view class="item padding-bottom dflex dflex-flow-c use-hover" v-for="item in categorys[categoryIndex].children" :key="item.id" @click="togoodslist(item)">
								<image :lazy-load="true" :src="item.catePic"></image>
								<text class="tac clamp margin-top-sm">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 右侧分类对应商品列表 -->
				<view v-if="false" :class="{ 'padding-tb-sm': !empty, 'padding-lr': !empty }">
					<!-- 空白页 -->
					<use-empty v-if="empty" height="70vh" :btn-tip="false" e-style="round" tip="无商品数据"></use-empty>

					<view v-else class="use-hover" v-for="(item, index) in goodsDatas" :key="index"
						@click="togoods(item)">
						<view class="goods border-radius padding margin-bottom-sm bg-main"
							style="padding-bottom: 15rpx;">
							<view class="goods-left">
								<image mode="aspectFill" :lazy-load="true" :src="item.img"></image>
							</view>
							<view class="margin-left-sm pos-r">
								<text class="clamp-2">{{ item.name }} {{ item.name_pw }}</text>
								<view class="pos-a price-box w-full">
									<text class="price">{{ item.price / 100 }}</text>
									<text class="m-price">{{ item.market_price / 100 }}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 上拉加载更多 -->
					<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
				</view>
			</scroll-view>
			
			<!-- 置顶 -->
			<use-totop ref="usetop" type="tabbar" bottom="150" :top="10" :style="{ marginBottom: navHeight + 'px' }" @to="totop"></use-totop>
		</view>

		<!-- 切换模式 1二级分类 2商品列表 -->
		<!-- <view class="fixed-top" :style="{ marginBottom: navHeight + 'px' }" @click="changeMode">
			<text class="iconfont iconpailie" v-if="mode == 1"></text>
			<text class="iconfont iconpailie02" v-if="mode == 2"></text>
		</view> -->
	</view>
</template>

<script>
	import {category_list,category_tree} from "../../js_sdk/apis/category.js"
	export default {
		data() {
			return {
				// 兼容支付宝 height 显示 bug
				scrollHeight: '100%',

				// 头部参数
				headerPlaceholder: 0,
				headerFixed: !0,
				searchAuto: !0,
				searchTip: '请输入搜索关键字',

				// 当前选中分类ID
				cid: 0,
				cname: '',
				// 一级数据
				categorys: [],
				categoryIndex:0,
				categoryDatas: [],
				categoryEmpty: true,
				empty: false,
				hasmore: 0,
				loadmoreType: 'nomore',
				// 商品请求数据
				reqdata: {
					rows: 20,
					page: 1
				},

				top: 0,
				scrollTop: 0,
				navHeight: 0
			};
		},
		watch: {
			goodsDatas(e) {
				// 监听数据，呈现空白页
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			},
			categorys(e) {
				// 监听数据，呈现空白页
				if(e){
					let empty = e.length === 0;
					if (this.categoryEmpty !== empty) {
						this.categoryEmpty = empty;
					}
				}
			}
		},
		onLoad() {
			category_tree().then(res=>{
				this.categorys=res.data
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			category_tree().then(res=>{
				this.categorys=res.data
				uni.stopPullDownRefresh();
			})
		},
		onTabItemTap(e) {
			console.log('tabitem tap', e);
			
			// uni.vibrateShort({
			//     success: function () {
			//         console.log('success');
			//     }
			// });
		},
		
		methods: {
			totop(e) {
				this.top = e.scrollTop
				this.$nextTick(function() {
					this.top = 0
				});
			},
			// 一级分类
			categorySelect(item,index) {
				this.categoryIndex =index;
			},
			// 跳转商品列表
			togoodslist(item) {
				console.log(item)
				uni.navigateTo({
					url:"../goods/goods-list?categoryId="+item.id
				})
			},
			onScroll(e) {
				this.$refs.usetop.change(e.detail.scrollTop);
			}
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $page-color-base;
	}

	.category {
		overflow: hidden;

		.left {
			width: 180rpx;
			background-color: $page-color-base;

			.item {
				font-size: 28rpx;
				height: 100rpx;
				color: $font-color-base;
				position: relative;

				&.active {
					color: $uni-color-primary;
					font-size: 38rpx;
					font-weight: 580;
				}
			}
		}

		.right {
			flex: 1;
			overflow: hidden;
			display: block;

			.item {
				flex-shrink: 0;
				width: 33.33%;
				font-size: $font-sm + 2upx;
				color: #666;

				image {
					width: 130rpx;
					height: 130rpx;
				}
			}
		}
	}

	.goods {
		display: flex;

		.goods-left {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.price-box {
			bottom: 0;
		}
	}
</style>
